<template>
  <div class="Buying">
    <!--弹窗-->
    <transition name="bounce-up">
      <div class="mask" v-if="maskShow">
        <!--支付-->
        <div class="mask-content">
          <h3 class="payH3">请输入支付密码 <span class="close" @click="maskShow=false">×</span></h3>

          <!--输入支付密码 v-if="hasPwd===1"-->
          <div class="pwdInp" v-if="hasPwd">
            <input type="password" placeholder="请输入支付密码" v-model="pay_passwod"/>
            <router-link
              v-if="!isApp()"
              tag="div"
              style="text-align:right;margin-top:.2rem;"
              to="/setPaypwd">忘记密码？
            </router-link>
            <div style="text-align:center">
              <el-button class="buyBtn" type="primary" :loading="touchBuy" @click="payNow">立即支付</el-button>
            </div>
          </div>

          <!--设置支付密码 v-if="hasPwd===0"-->
          <p style="text-align:center;margin-top:1rem;" v-else>您还没有设置支付密码，
            <router-link tag="span" style="color:#00a9cd;" to="/setPaypwd">立即设置 ></router-link>
          </p>
        </div>
      </div>
    </transition>

    <transition name="bounce-up">
      <div class="mask" v-if="touristWindow" @click="touristWindow=false">
        <div class="touristWindow__inner">
          <i class="el-icon-circle-close-outline touristWindow__inner__close" @click="touristWindow=false"></i>
          <h4 class="touristWindow__inner__title">您目前处于游客状态，尚未登陆</h4>
          <h4 class="touristWindow__inner__subtitle">未登录状态会有以下限制</h4>
          <ul class="touristWindow__inner__list">
            <li>1.充值花瓣及购买记录无法转移到其他设备，仅限本设备使用</li>
            <li>2.App卸载及手机丢失后充值的花瓣无法找回</li>
          </ul>
          <button class="touristWindow__inner__btn1" @click="$router.push('/login')">先去登录</button>
          <p class="touristWindow__inner__btn2" @click="iosStoreBuy()">仅在本设备充值</p>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  export default {
    name: 'Buying',
    props: ['DATA'],
    data() {
      return {
        maskShow: false,
        notEnoughShow: false,//花瓣不足
        hasPwd: false,//是否设有支付密码
        touchBuy: false,//支付按钮禁用
        pay_passwod: '',//支付密码
        touristWindow: false,//游客引导登录
      }
    },
    created() {
    },
    methods: {
      /**
       * init
       * @param
       */
      init() {

        //判断登录状态
        this.loginHandle().then(() => {
          //已登录
          return this.testBalance() //检查余额是否足够
        }).then(() => {

          this.testPayPwd()
          this.maskShow = true
        }).then(() => {

        })
      },
      /**
       * 登录状态
       * @param
       */
      loginHandle() {


        let userinfo = JSON.parse(localStorage.getItem('userInfo')),
          tourist = userinfo ? userinfo.tourist : 0
        return new Promise((resolve, reject) => {
          if (this.loginState()) {
            resolve()
          } else {
            this.redictTips('此课程为付费课程，请先登录进行购买', '去登录', '取消', '/login')
          }
        })
      },
      /**
       * 检测花瓣是否足够
       * @param
       */
      testBalance() {
        return new Promise((resolve, reject) => {

          let enough = this.DATA.member_amount >= this.DATA.order_amount ? true : false

          if (enough) {
            resolve()
          } else {
            this.redictTips('余额不足，去充值？', '充值', '取消', '/bag/deposit')
          }
        })
      },
      /**
       * 检测是否设有支付密码
       * @param
       */
      testPayPwd() {

        this.Posthttp('/?method=flower.user.checkPayPassword', {member_id: this.getMemberId()}, (res) => {

          this.hasPwd = JSON.parse(res.bodyText).status === 0 ? false : true;//0:无支付密码 1:有支付密码
        })
      },
      /**
       * 立即支付
       * @param
       */
      payNow() {

        let ids = ''
        this.DATA.lession.forEach((value, index) => {
          ids += `${value.lession_id},`
        })

        ids = ids.substring(0, ids.lastIndexOf(','))
        this.touchBuy = true
        this.Posthttp('/?method=flower.buy.buy_suit', {
          lession_id: ids,
          pay_passwod: this.pay_passwod,
          member_id: this.getMemberId()
        }, (res) => {

          this.touchBuy = false

          if (JSON.parse(res.bodyText).status === 1) {
            this.$message.success('购买成功~~')
            this.maskShow = false
            this.pay_passwod = ''
            this.$emit('buyingCaller')
          } else {
            this.$message.warning(JSON.parse(res.bodyText).msg)
          }
        })

      },
      /**
       * 跳转提示
       * @param
       */
      redictTips(title, confirmText, cancleText, url) {

        this.$confirm(title, '温馨提示', {
          confirmButtonText: confirmText,
          cancelButtonText: cancleText,
          type: 'info '
        }).then(() => {

          if (url === '/bag/deposit') {
            this.iosStoreBuy()
          } else {
            this.$router.push(url)
          }
        }).catch(() => {
          //do nothing
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .Buying {
    width: 100%;
    height: 100%;
    /*购买弹窗*/
    .mask {
      background-color: rgba(0, 0, 0, .5);
      z-index: 99;
    }

    /*余额不足*/
    .notEnough {
      position: fixed;
      top: 50%;
      left: calc(50% - 2rem);
      transform: translateY(-50%);
      z-index: 100;
      width: 4rem;
      height: .6rem;
      line-height: .6rem;
      background-color: #333;
      color: #edb53c;
      text-align: center;
      border-radius: .1rem;
    }

    /**/
    .mask-content {
      width: 90%;
      min-height: 4rem;
      position: absolute;
      left: 0;
      right: 0;
      top: 30%;
      margin: auto;
      padding: 0 0 .3rem;
      background-color: #fff;
      border-radius: .1rem;
      animation-duration: .4s;

      h3 {
        text-align: center;
        line-height: 1rem;
        border-bottom: 1px solid rgba(226, 85, 35, .4);
        margin-bottom: .4rem;
        font-size: .28rem;
        color: #333;
        font-weight: 600;
      }

      .payH3 {
        border-bottom: 1px solid #e4e4e4;
      }

      .close {
        position: absolute;
        right: .2rem;
        top: -.08rem;
        font-size: .4rem;
      }

      p {
        padding: 0 .2rem;
        margin-bottom: .3rem;
        color: #777;
        font-size: .26rem;
      }

      .buyBtn {
        width: 3rem;
        font-size: .28rem;
        margin-top: .6rem;
      }

      /*支付密码*/
      .pwdInp {
        width: 100%;
        padding: 0 .2rem;

        input {
          width: 100%;
          border: 1px solid #e4e4e4;
          height: .8rem;
          padding-left: .3rem;
          outline: none;
        }
      }
    }

  }
</style>
